<template>
  <div class="list" ref="wrapper">
  	<div>
  		<div class="area">
    	<div class="title border-topbottom">
    	当前城市
        </div>
        <div class="button-list">
        	 <div class="button-wrapper">        			
        		<div class="button">{{this.currentCity}}</div>
        	 </div>
        </div>
   </div>
   <div class="area">
    	<div class="title border-topbottom">
    	热门城市
        </div>
        <div class="button-list">
        	 <div class="button-wrapper" v-for="item of hot" :key="item.id"
@click ="handleCityClick(item.name)"
            >        			
        		<div class="button">{{item.name}}</div>
        	 </div>
        </div>
   </div>
    <div class="area" 
    v-for="(item,key) of cities"
     :key="key"
     :ref="key"
     >
    	<div class="title border-topbottom">{{key}}</div>
    	<div class="item-list">
    		<div class="item border-bottom"
         v-for="innerItem of item" 
         :key="innerItem.id"
         @click ="handleCityClick(innerItem.name)"

         >{{innerItem.name}}</div>
    	</div>
    </div>
   
  	</div>
    
  </div>
</template>

<script>
 import Bscroll from 'better-scroll'
 import {mapState,mapMutations} from 'vuex'
 export default{
   name:"CityList",
   props:{
   	hot:Array,
   	cities:Object,
    letter:String
   },
   computed:{
    ...mapState({
      currentCity:'city'
    })
   },
   watch:{
        letter(){
          if(this.letter){
             const element = this.$refs[this.letter][0];
            this.scroll.scrollToElement(element);
          }
        }
   },
   mounted(){
    this.scroll = new Bscroll(this.$refs.wrapper);

   },
   methods:{
    handleCityClick(city){
      this.changeCity(city);
      this.$router.push('/');
    },
    ...mapMutations(['changeCity'])
   }
 }
</script>

<style lang="less" scoped>
 @import '~styles/varibles.less';
 .list{position:absolute;top:1.58rem;right:0;bottom:0;left:0;overflow:hidden}
 .title{
 	line-height:0.54rem;
    background:#eee;
    padding-left:0.2rem;
    color:#666;
    font-size:0.26rem;
 }
 .border-topbottom{
 	&:before{
 		border-color:#ccc;
 	}
 	&:after{
        border-color:#ccc;
 	}
 }
 .border-bottom{
 	&:before{
 		border-color:#ccc;
 	}
  
 }
 .button-list{
 	overflow :hidden;
 	padding:0.1rem 0.6rem 0.1rem 0.1rem ;
   .button-wrapper{
     float:left;
     width:33.33%;
     .button{
     	text-align:center;
     	padding: 0.1rem 0;
     	margin:.1rem;
     	border:0.02rem solid #ccc;
     	border-raduis:0.06rem
     }
   }
  }
 .item-list .item{
 		line-height:0.76rem;
        padding-left:0.2rem;
 	}
 
 
</style>
